import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'flutter widget',
      theme: ThemeData(
          primarySwatch: Colors.green,
          buttonTheme: ButtonThemeData(buttonColor: Colors.blue),
          iconTheme: IconThemeData(color: Colors.cyan)),
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('Form之Button',
              style: TextStyle(
                  fontSize: 24.0,
                  fontWeight: FontWeight.bold,
                  fontStyle: FontStyle.normal)
          ),
        ),
        body: new ButtonList(),
        floatingActionButton: new FloatingActionButton(
          onPressed: () => {},
          child: new Icon(Icons.add_a_photo),
          elevation: 5.0, //未点击时阴影值
          highlightElevation: 2.0,//点击下阴影值
          backgroundColor: Colors.red,
        ),
      ),
    );
  }
}

double _addTapNum = 0.0;
class ButtonList extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new ListView(
      children: <Widget>[
        new Column(
          children: <Widget>[
            new Padding(
              padding: const EdgeInsets.all(10.0),
              child: new Text(
                '1、RaisedButton类型',
                style: TextStyle(
                  fontSize: 28.0,
                ),
              ),
            ),
            new RaisedButton(
                onPressed: null,
                padding: EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 10.0),
                disabledColor: Colors.black12,
                child: new Text('禁止按钮',style: TextStyle(fontSize: 24.0))
            ),
            new RaisedButton(
                onPressed: () => {},
                textColor: Colors.white,
                padding: const EdgeInsets.fromLTRB(20.0,10.0,20.0,10.0),
                child: new Text(
                    '可点击按钮',
                  style: TextStyle(
                    fontSize: 20.0
                  ),
                )
            ),
          ],
        ),
        new Column(
          children: <Widget>[
            new Padding(
              padding: const EdgeInsets.all(10.0),
              child: new Text(
                '2、MaterialButton类型',
                style: TextStyle(
                  fontSize: 28.0,
                ),
              ),
            ),
            new MaterialButton(
                onPressed: null,
                padding: EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 10.0),
                color: Colors.deepPurpleAccent,
                disabledTextColor: Colors.black,
                child: new Text('禁止按钮',style: TextStyle(fontSize: 24.0))
            ),
            new MaterialButton(
                onPressed: () => {
                  print('点击事件')
                },
                color: Colors.cyan,
                textColor: Colors.white,
                padding: const EdgeInsets.fromLTRB(20.0,10.0,20.0,10.0),
                child: new Text(
                  '可点击按钮',
                  style: TextStyle(
                      fontSize: 20.0
                  ),
                )
            ),
          ],
        ),
        new Column(
          children: <Widget>[
            new Padding(
              padding: const EdgeInsets.all(10.0),
              child: new RichText(
                text: new TextSpan(
                  text:'3、FlatButton类型',
                  style: TextStyle(fontSize: 24.0,color: Colors.black),
//                  style: DefaultTextStyle.of(context).style,
                  children: <TextSpan>[
                    TextSpan(
                        text: 'FlatButton 与 MaterialButton 类似，不同的是它是透明背景的。',
                        style: TextStyle(
                            fontSize: 20.0,
                            color:Colors.amber,
                            fontWeight: FontWeight.bold
                        )
                    ),
                    TextSpan(
                        text: '如果一个 Container 想要点击事件时，可以使用 FlatButton 包裹，而不是 MaterialButton。因为 MaterialButton 默认带背景，而 FlatButton 默认不带背景',
                        style: TextStyle(
                            fontSize: 20.0,
                            color:Colors.redAccent,
                            fontWeight: FontWeight.bold
                        )
                    ),
                  ]
                )
              ),
            ),
            new MaterialButton(
                onPressed: null,
                padding: EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 10.0),
                color: Colors.deepPurpleAccent,
                disabledTextColor: Colors.black,
                child: new Text('禁止按钮',style: TextStyle(fontSize: 24.0))
            ),
            new MaterialButton(
                onPressed: () => {
                  debugPrint('点击事件')
                },
                color: Colors.cyan,
                textColor: Colors.white,
                padding: const EdgeInsets.fromLTRB(20.0,10.0,20.0,10.0),
                child: new Text(
                  '可点击按钮',
                  style: TextStyle(
                      fontSize: 20.0
                  ),
                )
            ),
          ],
        ),
        new Column(
          children: <Widget>[
            new Padding(
              padding: const EdgeInsets.all(5.0),
              child: new Text(
                '4、OutlineButton类型',
                style: TextStyle(
                  fontSize: 24.0
                ),
              ),
            ),
            new Padding(
              padding: const EdgeInsets.fromLTRB(10.0, 4.0, 10.0, 6.0),
              child: new RichText(
                  text: new TextSpan(
                      text:'Material Design中的button，RaisedButton和FlatButton之间的交叉，',
                      style: TextStyle(fontSize: 18.0,color: Colors.deepOrange),
//                  style: DefaultTextStyle.of(context).style,
                      children: <TextSpan>[
                        TextSpan(
                            text: '一个带边框的背景透明的按钮，当按下按钮时，其高度增加，背景变得不透明',
                            style: TextStyle(
                                fontSize: 18.0,
                                color:Colors.amber,
                                fontWeight: FontWeight.bold
                            )
                        ),
                      ]
                  )
              ),
            ),
            new OutlineButton(
                onPressed: null,
                padding: EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 10.0),
                child: new Text('禁止按钮',style: TextStyle(fontSize: 24.0))
            ),
            new OutlineButton(
                onPressed: () => {
                  debugPrint('点击事件')
                },
                padding: const EdgeInsets.fromLTRB(20.0,10.0,20.0,10.0),
                child: new Text(
                  '可点击按钮',
                  style: TextStyle(
                      fontSize: 20.0
                  ),
                )
            ),
          ],
        ),
        new Column(
          children: <Widget>[
            new Padding(
              padding: const EdgeInsets.all(5.0),
              child: new Text(
                '5、IconButton类型',
                style: TextStyle(
                    fontSize: 24.0
                ),
              ),
            ),
            new IconButton(
                icon: new Icon(Icons.add_shopping_cart),
                onPressed: null,
                padding: EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 10.0),
                tooltip: '禁止按钮',
            ),
            new IconButton(
              icon: new Icon(Icons.add_circle),
                onPressed: () => {
                 debugPrint('点击事件')
                },
                padding: const EdgeInsets.fromLTRB(20.0,10.0,20.0,10.0),
                tooltip: '可点击按钮',
            ),
            new Text('可点击按钮点击数量:$_addTapNum')
          ],
        ),
        new Column(
          children: <Widget>[
            new Padding(
              padding: const EdgeInsets.all(5.0),
              child: new Text(
                '6、FloatingActionButton类型',
                style: TextStyle(
                    fontSize: 24.0
                ),
              ),
            ),
            new Container(
              padding: const EdgeInsets.fromLTRB(20.0,20.0,100.0,20.0),
              color: Colors.amber,
              child: new Row(
                mainAxisAlignment: MainAxisAlignment.end,
                children: <Widget>[
                  new Text('见右下侧',style: TextStyle(fontSize: 24.0,color: Colors.green,fontWeight: FontWeight.bold),),
                  new Icon(
                    Icons.arrow_forward,
                    size: 30.0,
                  )
                ],
              ),
            ),

          ],
        ),
        new Column(
          children: <Widget>[
            new Padding(
              padding: const EdgeInsets.all(5.0),
              child: new Text(
                '7、自定义按钮类型，示例基于FlatButton',
                style: TextStyle(
                    fontSize: 22.0
                ),
              ),
            ),
            new FlatButton(
                padding: const EdgeInsets.fromLTRB(30.0,15.0,30.0,15.0),
                color: Colors.blue,
                onPressed: () => {},
                highlightColor: Colors.blue[700],
                splashColor:Colors.lightGreenAccent,
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(50.0)
                ),
                child: new Text('这是一个自定义按钮',style: TextStyle(fontSize: 20.0,color: Colors.white)))

          ],
        ),
      ],
    );
  }
}
